<template>
  <div class="loginWrap">
    <img src="../../../static/images/loginWrap.png" alt="">
    <div class="outSide">
      <div class="outsideBox">
        <p class="p1">登录</p>
        <div class="loginArea">
          <form action="">
            <div class="loginInput">
              <input type="text" placeholder="输入手机号" id="telPhoneCheck"
                     @focus="hideTips"
                     @blur="checkTel" ref="telPhoneCheck">
              <p class="errorTips animated shake" v-if="telError">手机格式错误</p>
            </div>
            <div class="loginInput">
              <input type="password"
                     @keyup="showEyes"
                     ref="fillPhone"
                     placeholder="输入密码" >
              <span class="eyes" v-if="showeyes" @click.stop="togglePassword"></span>
            </div>
            <div class="logincode">
                <input type="text" placeholder="输入图形验证码" v-model="picCode">
                <img :src=src  alt="" class="codeArea" ref="codeArea" @click.stop="changeCode">
            </div>
            <div class="passwordArea">
              <label class="weui-cell weui-check__label" for="s11">
                <div class="weui-cell__hd">
                  <input type="checkbox" class="weui-check" name="checkbox1" id="s11" ref="s11">
                  <i class="weui-icon-checked"></i>
                </div>
                <div class="weui-cell__bd">
                  <p>记住密码</p>
                </div>
              </label>
              <span class="forgetPassword">
                <router-link :to="{path:'/resetPassword'}">
                     忘记密码？
                </router-link>
                </span>
            </div>
            <div class="loginBtn">
              <input type="button" value="登录" id="finished" @click.stop="loginBtn">
            </div>
            <p class="loginText">
                <router-link :to="{path:'/regeister'}">
                  没有账号？去注册
                </router-link>
            </p>
          </form>
        </div>
      </div>
      <div class="center"></div>
    </div>
    <Alarm :alarm="alarm" v-if="showAlarm" @cancel="cancel" @confirm="confirm"></Alarm>
  </div>
</template>
<script>
  import Alarm from '../../components/alarm.vue'
  import localForage from 'localforage'
  import{mapState,mapMutations} from 'vuex'
  export default({
    data(){
        return {
          telError:false,
          showeyes:false,
          alarm:'',
          showAlarm:false,
          picCode:'',
          CODEURL:"../../../static/images/codeCover.jpg",
          src:'',
          randomArray:[]
        }
    },
    computed:{
      ...mapState({
        loginState:state =>state.app.loginState
      })
    },
    components:{
      Alarm:Alarm
    },
    methods:{
      ...mapMutations(['saveUid']),
      cancel(){
        this.showAlarm =false
      },
      confirm(){
        this.showAlarm =false
      },
      loginBtn(){
          if(this.checkTel()&&this.$refs.fillPhone.value&&this.picCode){
              //提交数据
              if(this.$refs.s11.checked){
                  //记住密码

                this.postLogin(true)
              }else {
//                localStorage.setItem('userAccount',this.$refs.telPhoneCheck.value)
                this.postLogin(false)
              }
          }else{
              this.showAlarm=true
              this.alarm='请完善信息'
          }
      },
      postLogin(flag){
        this.axios.post('/home/Login/login?'+`${this.baseUrl}`,{
          tel:this.$refs.telPhoneCheck.value,
          password:this.$refs.fillPhone.value,
          captcha:this.picCode,
          id:this.randomArray,
        })
          .then((res)=>{
            console.log(res.data.code)
            if(res.data.code==1){
              let that =this
              this.alarm=res.data.msg
              this.showAlarm =true
              this.loginState.isExit =1
              if(flag){
                localStorage.setItem('uid',res.data.data.uid)
                localStorage.setItem('token',res.data.data.token)
              }else{
                localStorage.setItem('uid',res.data.data.uid)
                localStorage.setItem('token',res.data.data.token)
//                this.setCookie('uid',res.data.data.uid,0.1)
              }
//              var baseSecret ='71clouddangjiang'
//              var currentTime = +new Date()
//              var token =res.data.data.token
//              var uid= res.data.data.uid
//              var secret =this.MD5(`${baseSecret}${token}${currentTime}${uid}`)
//              var baseUrl =`secret=${secret}&uid=${uid}&time=${currentTime}`
//              this.baseUrl =baseUrl
              this.saveUid({
                  uid:res.data.data.uid,
                  token:res.data.data.token
              })
              setTimeout(function () {
                that.$router.push({
                  name:'pageIndex'
                })
              },2000)
            }else{
              this.alarm=res.data.msg
              this.showAlarm =true
            }
          })
      },
      checkTel(){
        var reg2 =/^(((13|14|15|16|18|17|19)\d{9}))$/;
        if( !reg2.test(this.$refs.telPhoneCheck.value) ){
           this.telError =true
           return false;
        }
        return true
      },
      hideTips(){
          this.telError =false
      },
      showEyes(e){
        if(e.keyCode===8){
        }else{
            this.showeyes =true
        }
      },
      togglePassword(){
        if(this.$refs.fillPhone.type==='password'){
          this.$refs.fillPhone.type='text'
        }else if (this.$refs.fillPhone.type==='text'){
          this.$refs.fillPhone.type='password'
        }
      },
      getRandom(){
        this.randomArray =''
        var array =['1','2','3','4','5','6','7','8','9','0','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']
        for(var i=0;i<4;i++){
          this.randomArray+= array[parseInt(Math.random()*array.length)]
        }
        return (this.randomArray)
      },
      initCode(){
        let that =this
        this.axios.get('/home/Login/create?'+`${this.baseUrl}`,{
          params:{
            id:that.getRandom(),
          }
        }).then((res)=>{
          this.src=res.request.responseURL
        })
      },
      changeCode(){
          this.initCode()
      },
     getCookie(c_name) {
          if (document.cookie.length > 0) {
            c_start = document.cookie.indexOf(c_name + "=")
            if (c_start != -1) {
              c_start = c_start + c_name.length + 1
              c_end = document.cookie.indexOf(";", c_start)
              if (c_end == -1) c_end = document.cookie.length
              return unescape(document.cookie.substring(c_start, c_end))
            }
          }
  },
   setCookie(c_name,value,expiredays){
          var exdate=new Date()
          exdate.setDate(exdate.getDate()+expiredays)
          document.cookie=c_name+ "=" +escape(value)+
            ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
        },

    },
    mounted(){

        console.log(this.$route)
        this.initCode()
    },
    created(){
//        if(localStorage.getItem('userAccount')&&localStorage.getItem('uid')){
//            this.$router.push({
//              path:'/index'
//            })
//
//        }else{
//          this.$router.push({
//            path:'/'
//          })
//        }
    }
  })
</script>
<style scoped>
  .loginWrap{
    background: #fcfcfd;
    width: 100%;
    height: 100%;
    position: relative;
  }
  .outSide {
    text-align: center;
    font-size: .34rem;
    color: #333;
    position: absolute;
    left: 0rem;
    top: 1.2rem;
    width: 6.5rem;
    margin: 0 0.5rem;
    background: white;
    height: 8.14rem;
    background: transparent;
  }

  .outsideBox {
    position: absolute;
    left: 0rem;
    top: 0;
    width: 6.50rem;
    height: 8rem;
    background: white;
    border-radius: .16rem;
    box-shadow: 0 5px 5px #fce2e3;
    z-index: 3;
  }

  .outsideBox p {
    text-align: justify;
    padding: 0 0rem;
    color: #e83126;
    font-size: 0.22rem;
  }
  .forgetPassword{
    color: #e83126;
    font-size: 0.22rem;
  }
  .forgetPassword a{
    color: #e83126;
  }
  .outsideBox .p1 {
    text-align: center;
    padding-top: 0.6rem;
    font-weight: bold;
    padding-bottom: .20rem;
    color: #333;
    font-size: .34rem;
    letter-spacing: 0.05rem;
  }

  .outsideBox .p2 {
    padding-bottom: .50rem;
  }

  .center {
    position: absolute;
    top: 0;
    left: .25rem;
    width: 6rem;
    bottom: 0rem;
    height: 8.30rem;
    background: white;
    border-radius: .12rem;
    box-shadow: 0 5px 5px #fce2e3;
    z-index: 2;
  }
  .loginArea{
    width: 5.2rem;
    margin: 0 auto;
  }
  .loginInput input{
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding-left: 0.3rem;
    height:0.8rem;
    border-radius:0.1rem;
    -webkit-border-radius: 0.1rem;
    font-size: 0.34rem;
    border: none;
    outline: none;
    border: 0.02rem solid #f4f4f5;
  }
  .passwordArea{
    margin-top:0.58rem;
    margin-bottom: 0.3rem;
    overflow: hidden;
  }
  .weui-cell{
    padding: 0;
  }
  .passwordArea .weui-check__label{
    float: left;
    height: 0.58rem;
  }
  .passwordArea .forgetPassword{
    float: right;
    height: 0.58rem;
    line-height: 0.58rem;
  }
  .loginInput{
    margin-top: 0.4rem;
    position: relative;
  }
  .logincode{
    margin-top: 0.4rem;
    overflow: hidden;
  }
  .loginInput input{
    background: #fafafa;
  }
  .logincode input{
    width: 3.4rem;
    background: #fafafa;
    -webkit-box-sizing: border-box;
    padding-left: 0.3rem;
    height: 0.8rem;
    border-radius: 0.1rem;
    -webkit-border-radius: 0.1rem;
    font-size: 0.34rem;
    border: none;
    outline: none;
    border: 0.02rem solid #f4f4f5;
    float: left;
  }
  .logincode .codeArea{
    float: right;
    width: 1.6rem;
    height: 0.8rem;
    background: #dcdcdc;
    background-image: url("../../../static/images/codeCover.jpg") ;
    background-position: center;
    background-repeat: no-repeat;
    line-height: 0.8rem;
    background-size: 1.6rem  0.8rem;
  }
  .logincode .codeArea img{
    width: 100%;
    height: 100%;
  }
  ::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
    font-size: 0.3rem;
  }
  .loginInput .errorTips{
    position: absolute;
    right: 0.6rem;
    top:0;
    height: 100%;
    padding-right: 0.6rem;
    background-image: url("../../../static/images/errorTips.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 0.3rem 0.3rem;
    font-size:0.24rem;
    color: #e83328;
    line-height: 0.8rem;
  }
  .loginInput .eyes{
    position: absolute;
    right: 0.3rem;
    top:0;
    height: 100%;
    width: 0.68rem;
    background-image: url("../../../static/images/eyes2.png");
    background-size: 0.38rem 0.24rem;
    background-repeat: no-repeat;
    background-position: center;
  }
  .loginBtn{
    width: 100%;
    height: 0.8rem;
    margin-top: 0.3rem;
  }
  .loginBtn input{
    width: 100%;
    text-align: center;
    line-height: 0.8rem;
    font-size:0.34rem;
    color: #ffffff;
    border: none;
    outline: none;
    background: linear-gradient(to right, #f84342 0%, #e83126 100%);
    border-radius: 0.12rem;
  }

  .loginArea input{

  }
  .loginTips {
    text-align: center;
    font-size: 0.24rem;
    color: white;
    margin-top: 0.2rem;

  }

  @-webkit-keyframes shake {
    from,
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
  }

  @keyframes shake {
    from,
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
  }
  .shake {
    -webkit-animation-name: shake;
    animation-name: shake;
  }

  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
 .weui-check:checked + .weui-icon-checked:before {
    content: '\EA06';
    color: #e83126;
  }
  .weui-icon-checked:before {
    content: '\EA01';
    color: #C9C9C9;
    font-size: 23px;
    display: block;
  }
  .weui-icon-checked:before {
    content: '\EA01';
    color: #C9C9C9;
    font-size: 23px;
    display: block;
  }
  .loginText{
    margin-top: 0.2rem;
    text-align: center;
    font-size: 0.22rem;
    color: #61a2ff;
  }
</style>
